<!--
 * @Author: boyyang
 * @Date: 2022-01-14 10:31:41
 * @LastEditTime: 2022-02-18 20:35:55
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\nowTime\index.vue
-->
<template>
    <div class="time-wrapper" :style="{ backgroundColor: props.backgroundColor }" v-show="_time.isBegin">
        <span class="time">
            <span class="time-num">{{ _time.hours }}</span>
            <span>:</span>
            <span class="time-num">{{ _time.min }}</span>
            <span>:</span>
            <span class="time-num time-sec">{{ _time.sec }}</span>
        </span>
        <span class="week">{{ _time.day }}</span>
    </div>
</template>

<script lang="ts" setup>
import { decimalPlaces } from '@/utils/decimalPlaces'

interface INowTime {
    day?: string;
    hours?: number | string;
    min?: number | string;
    sec?: number | string;
    isBegin: boolean
}

interface INowTimeProps {
    backgroundColor?: string;
    height?: number;
}

const props = withDefaults(defineProps<INowTimeProps>(), {
    backgroundColor: 'rgb(0,0,0)',
    height: 200
})


const timer = ref<any>(null)
const _time = reactive<INowTime>({
    hours: '',
    min: '',
    sec: '',
    isBegin: false
})


onMounted(() => {
    timer.value = setInterval(() => {
        getTime()
    }, 1000)
})

onUnmounted(() => {
    clearInterval(timer.value)
})

const getTime = () => {
    let time = new Date()

    let day = time.getDay()
    let hours = time.getHours()
    let min = time.getMinutes()
    let sec = time.getSeconds()

    _time.day = getDay(day)
    _time.hours = decimalPlaces(hours)
    _time.min = decimalPlaces(min)
    _time.sec = decimalPlaces(sec)
    _time.isBegin = true
}

const getDay = (day: number): string => {
    switch (day) {
        case 0:
            return '星期日'
        case 1:
            return '星期一'
        case 2:
            return '星期二'
        case 3:
            return '星期三'
        case 4:
            return '星期四'
        case 5:
            return '星期五'
        case 6:
            return '星期六'
        default:
            return ''
    }
}

</script>

<style scoped lang="scss">
.time-wrapper {
    box-sizing: border-box;
    width: 100%;
    // height: 200px;
    border-radius: 10px;
    overflow: hidden;

    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.time {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: whitesmoke;
    white-space: nowrap;

    display: flex;
    justify-content: center;
}

.time-num {
    display: block;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-sec {
    box-sizing: border-box;
    width: 80px;
    color: rgb(189, 34, 129);

    margin: 0 10px;

    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 3px;


    @keyframes colorTrans {
        0% {
            // color: rgb(255, 255, 255);
            // transform: scale(0.5);
            // transform: translateY(-10px);
        }

        100% {
            color: rgb(189, 34, 129);
            // transform: scale(1.5);
            // transform: translateY(100px);
        }
    }
}

.week {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: whitesmoke;
    margin-top: 10px;
}

@media screen and (max-width: 500px) {
    .time-wrapper {
        width: 100%;
    }

    .time {
        font-size: 25px;
        color: black;
    }

    .week {
        color: rgb(184, 59, 59);
        font-size: 30px;
    }
}
</style>